<template>
  <div :style="{'border':'1px solid #efefef','width': panelParam.width,'height': panelParam.height,'padding':'0px'}">
    <div style="background:#eeeeee;height:30px;font-weight: bold;width:100%;line-height:30px;font-size:13px">
      &nbsp;{{panelParam.title}}
      <div style="display:inline;float:right;margin-right:5px" v-if="panelParam.isShowButton">
        <a href="javascript:" class="panelButtonStyle" @click="yfuPanelSave">保存</a>
      </div>
    </div>
    <div :style="{'padding':'5px', 'background': panelParam.bg}">
      <slot>

      </slot>
    </div>
  </div>
</template>
<style scoped>
  .panelButtonStyle {
    font-size:12px;
    color:#4caf5099;
    text-decoration:none;
  }
  .panelButtonStyle:hover {
    color: #4caf50;
  }
</style>
<script>
  export default {
    props: ['panelParam'],
    data () {
      return {
      }
    },
    methods: {
      yfuPanelSave () {
        this.$emit('yfuPanelSave')
      }
    }
  }
</script>
